Skip to content

Migrate FailedTestCaseSampleData table to core-ui Table component#27985

Merged
shah-harshit merged 4 commits into
mainfrom
feat/migrate-failed-sample-data-core-ui
May 9, 2026
Merged

Migrate FailedTestCaseSampleData table to core-ui Table component#27985
shah-harshit merged 4 commits into
mainfrom
feat/migrate-failed-sample-data-core-ui

Conversation

@shah-harshit
Copy link
Copy Markdown
Contributor

Summary

  • Replace Ant Design Table with core-ui Table (react-aria-components) in FailedTestCaseSampleData.component.tsx
  • Add border wrapper tw:overflow-x-auto tw:border tw:border-border-secondary tw:rounded-[10px] with horizontal scroll support
  • Add 210px min-width on data cells for consistent column sizing
  • Add 8px padding on header and data cells
  • Center diff-type column content vertically and horizontally
  • Move all styles from failed-test-case-sample-data.less to tw: theme token classes — delete the .less file entirely
  • Use semantic tw: tokens: tw:bg-success-primary, tw:bg-error-primary, tw:text-error-primary, tw:text-success-primary, tw:text-gray-500, tw:bg-gray-50, tw:border-r-gray-blue-100
  • Preserve failed-sample-data-column CSS class for e2e test selector compatibility

Reference

https://github.com/open-metadata/openmetadata-collate/issues/3837

Test plan

  • Verify failed test case sample data table renders with correct border and layout
  • Verify diff rows show correct background colors (green for add, red for remove, grey for not-equal)
  • Verify diff-type column (+/-/!=) shows centered with correct text color
  • Verify failed column highlighted with red background and text
  • Verify horizontal scroll works when many columns present
  • Run e2e: yarn playwright:run --grep FailedTestCaseSampleData

🤖 Generated with Claude Code

…mponent

- Replace Ant Design Table with core-ui Table (react-aria-components)
- Add border wrapper tw:border tw:border-border-secondary tw:rounded-[10px]
- Add 210px min-width on data cells with horizontal scroll
- Add 8px padding on header and data cells
- Center diff-type column content vertically and horizontally
- Move all styles from .less file to tw: classes using theme tokens
- Delete failed-test-case-sample-data.less

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@shah-harshit shah-harshit requested a review from a team as a code owner May 8, 2026 09:27
@shah-harshit shah-harshit added UI UI specific issues safe to test Add this label to run secure Github workflows on PRs labels May 8, 2026
@shah-harshit shah-harshit self-assigned this May 8, 2026
@shah-harshit shah-harshit changed the title refactor(FailedTestCaseSampleData): migrate table to core-ui Table component Migrate FailedTestCaseSampleData table to core-ui Table component May 8, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

Jest test Coverage

UI tests summary

Lines Statements Branches Functions
Coverage: 62%
62.5% (63200/101117) 42.98% (34252/79689) 45.87% (10088/21992)

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

🟡 Playwright Results — all passed (16 flaky)

✅ 4012 passed · ❌ 0 failed · 🟡 16 flaky · ⏭️ 86 skipped

Shard Passed Failed Flaky Skipped
🟡 Shard 1 297 0 2 4
🟡 Shard 2 750 0 5 8
🟡 Shard 3 757 0 2 7
🟡 Shard 4 786 0 4 18
✅ Shard 5 687 0 0 41
🟡 Shard 6 735 0 3 8
🟡 16 flaky test(s) (passed on retry)
  • Features/EntityRenameConsolidation.spec.ts › Tag - rename then update description should work (shard 1, 1 retry)
  • Features/TeamsDragAndDrop.spec.ts › Add teams in hierarchy (shard 1, 1 retry)
  • Features/ActivityAPI.spec.ts › Activity event shows the actor who made the change (shard 2, 1 retry)
  • Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
  • Features/DataQuality/BundleSuiteBulkOperations.spec.ts › Add test case to existing Bundle Suite (shard 2, 1 retry)
  • Features/Glossary/GlossaryWorkflow.spec.ts › should display correct status badge color and icon (shard 2, 1 retry)
  • Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts › Data Product asset count should update when assets are added (shard 2, 1 retry)
  • Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
  • Flow/AddRoleAndAssignToUser.spec.ts › Verify assigned role to new user (shard 3, 1 retry)
  • Pages/CustomProperties.spec.ts › Entity Reference (shard 4, 1 retry)
  • Pages/DataContractInheritance.spec.ts › Partial Contract Inheritance - Asset contract merges with Data Product contract (shard 4, 1 retry)
  • Pages/DataContracts.spec.ts › Create Data Contract and validate for Table (shard 4, 1 retry)
  • Pages/DataContractsSemanticRules.spec.ts › Validate Description Rule Is_Not_Set (shard 4, 1 retry)
  • Pages/Glossary.spec.ts › Column dropdown drag-and-drop functionality for Glossary Terms table (shard 6, 1 retry)
  • Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
  • Pages/ODCSImportExport.spec.ts › Multi-object ODCS contract - object selector shows all schema objects (shard 6, 1 retry)

📦 Download artifacts

How to debug locally
# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

@gitar-bot
Copy link
Copy Markdown

gitar-bot Bot commented May 9, 2026

Code Review ✅ Approved 1 resolved / 1 findings

Migrates FailedTestCaseSampleData table to core-ui components and replaces legacy LESS styles with semantic Tailwind utility classes. No issues found.

✅ 1 resolved
Quality: Hardcoded border-radius value violates styling guidelines

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/FailedTestCaseSampleData/FailedTestCaseSampleData.component.tsx:249
The class tw:rounded-[10px] uses an arbitrary hardcoded value. Per project guidelines, hardcoded values should be avoided in favor of semantic CSS custom properties or standard Tailwind scale values (e.g., tw:rounded-xl which is 12px, or tw:rounded-lg which is 8px). Consider using the closest standard value or defining a semantic token if 10px is intentional.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 9, 2026

@shah-harshit shah-harshit merged commit 0ff09b4 into main May 9, 2026
48 checks passed
@shah-harshit shah-harshit deleted the feat/migrate-failed-sample-data-core-ui branch May 9, 2026 09:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

safe to test Add this label to run secure Github workflows on PRs UI UI specific issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants